import { useState, useEffect } from 'react';

interface Item {
  id: number;
  name: string;
}

function Child(props: { name: string }) {
  useEffect(() => {
    console.log("子组件DidMount和DidUpdate", props.name);
    const timer = setTimeout(() => {
      console.log('timeout 执行')
    }, 2000);
    return () => {
      console.log("子组件WillUnmount");
      clearTimeout(timer)
    };
  }, [props.name]);
  return <div>Child</div>;
}

export default function Demo01() {
  const [count, setCount] = useState(0);
  const [list, setList] = useState<Item[] | null>(null);
  const [show, setShow] = useState(true)
  const [name, setName] = useState("")
  useEffect(() => {
    console.log("相当于组件DidMount和DidUpdate");
  });
  useEffect(() => {
    // 模拟数据获取
    const fetchData = async () => {
      console.log("组件已挂载，开始获取数据...");
      // 在这里可以添加实际的数据获取逻辑
      // 比如使用fetch或axios来获取数据
      setTimeout(() => {
        setList([
          { id: 1, name: "Item 1" },
          { id: 2, name: "Item 2" },
          { id: 3, name: "Item 3" }
        ]);
        console.log("数据获取完成，更新状态...");
      }, 500);
    };
    fetchData();
    // 清理函数（可选）
    return () => {
      console.log("组件将卸载，清理副作用...");
      // 在这里可以添加清理逻辑，比如取消订阅等
      window.history.replaceState(null, '', '');
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行


  useEffect(() => {
    console.log(`当前计数: ${count}`);
    // 这里可以添加其他副作用逻辑，比如更新文档标题等
    window.history.replaceState(null, '', `?count=${count}`);
  }, [count]); // 依赖数组包含count，表示当count变化时执行
  return (
    <div>
      <h1>useEffect示例</h1>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <h2>获取的列表:</h2>
      {list ?  (
        <ul>
          {list.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>正在加载数据...</p>
      )}
      <h2>下面是子组件</h2>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setShow(!show)}>切换子组件</button> 
      {show && <Child name={name} />}
    </div>
  );
}